<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>Document</title>
<!-- 外部的引入文件 -->
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/animate.min.css">

<script src="js/jquery.min.js"></script>
<script src="js/swiper.animate.min.js"></script>
<script src="js/swiper.min.js"></script>
<!-- 本页面的样式和效果 -->
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="swiper-container" id="box">
    <div class="music_logo">
        <img id="music_click" src="images/music_off.png" alt="">
        <audio id="music_mp3" src="music.mp3" loop="loop"  autoplay="autoplay"></audio>
    </div>
    <div class="swiper-wrapper">
        <!-- 第一屏 -->
        <div class="swiper-slide one">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s">后盾风云录</h1>
            <div class="hd_logo ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s"  alt=""></div>
            <div class="content ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="2s">后盾网&nbsp;&nbsp;人人做后盾</div>
        </div>
        <!-- 第二屏 -->
        <div class="swiper-slide two">
           
            <div class="jiuye1 ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.2s"  alt=""></div>

            <div class="jiuye3 ani" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1s" swiper-animate-delay="0.8s"  alt=""></div>

            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1.2s" swiper-animate-delay="1.2s">当我毕业 = <span>失业</span></h1>
        </div>
        <!-- 第三屏 -->
        <div class="swiper-slide three">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s">我不想去<span>搬砖</span></h1>
            <img class="banzhuan1 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="1s" swiper-animate-delay="1s" width="250" src="images/banzhuan1.jpg" alt="">
            <img class="banzhuan2 ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="1s" swiper-animate-delay="1s" width="250" src="images/banzhuan3.jpg" alt="">
        </div>
        <!-- 第四屏 -->
        <div class="swiper-slide four">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.6s">也不想<span>流落街头</span></h1>
            <img class="ani" swiper-animate-effect="lightSpeedIn" swiper-animate-duration="1s" swiper-animate-delay="1s" width="200" src="images/qigai.jpg" alt="">
        </div>
        <!-- 第五屏 -->
        <div class="swiper-slide five">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s">要向命运<span>低头</span>吗？</h1>
            <div class="ani touxiang1" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.6s"></div>
            <div class="ani touxiang2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="1s"></div>
            <div class="ani touxiang3" swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="1.4s"></div>
        </div>
        <div class="swiper-slide six">           
            <div class="fanu">
                <div class="ani fanu fanu1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
                <div class="ani fanu fanu2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
                <div class="ani fanu fanu3" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
                <div class="ani fanu fanu4" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
            </div>
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s"><span>绝不......</span></h1>
        </div>
        <div class="swiper-slide seven">  
                <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s">直到我来到了<span>这里</span></h1>         
                <div class="ani houdun houdun1" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
                <div class="ani houdun houdun2" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.3"></div>
        </div>
        <div class="swiper-slide eight">  
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s">从此充满<span>希望</span></h1>
            <img class="ani success success1" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" src="images/success1.png" alt="">
            <img class="ani success success2" swiper-animate-effect="bounceInLeft" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" src="images/success2.png" alt="">
            <img class="ani success success3" swiper-animate-effect="bounceInRight" swiper-animate-duration="1.5s" swiper-animate-delay="0.5s" src="images/success3.png" alt="">            
        </div>
        <div class="swiper-slide nine">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s">终于高薪<span>就业</span></h1>
            <img class="ani xueyuan xueyuan1" swiper-animate-effect="bounceInRight" src="images/xueyuan1.png" swiper-aniamte-duration="1s" swiper-animate-delay="0.5s" alt="">
            <img class="ani xueyuan xueyuan2" swiper-animate-effect="bounceInLeft" swiper-aniamte-duration="1s" swiper-animate-delay="0.5s" src="images/xueyuan2.png" alt="">
        </div>
        <div class="swiper-slide ten">
            <h1 class="title ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="0.2s">感谢<span>后盾</span><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;感谢有你</h1>
            <img swiper-animate-effect="bounceInRight" swiper-animate-duration="2s" swiper-animate-duration="0.6s" class="ani houdun houdun1" width="250" height="250" src="images/houdunwang.png" alt="">
            <img swiper-animate-effect="bounceInLeft" swiper-animate-duration="2s" swiper-animate-duration="0.6s" class="ani houdun houdun2" width="250" height="250" src="images/dengshan.png" alt="">
        </div>
    </div>




    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div> 
    
    <!-- 前进后退按钮 -->
<!--     <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->

</div>
<script src="js/js.js"></script>
</body>
</html>